<script setup lang="ts" name="TomatoCorner">
const countdown = ref<number>(0)
const clockStatus = ref<boolean>(false)
const dom = ref()
const calcTime = computed(() => {
    if(!countdown.value){
        return '加载中'
    }
    let m = Math.floor(countdown.value / 1000 / 60)
    let s = Math.floor(countdown.value / 1000) % 60
    const n1 = m < 10 ? '0' : m.toString()[0]
    const n2 = m < 10 ? m : m.toString()[1]
    const n3 = s < 10 ? '0' : s.toString()[0]
    const n4 = s < 10 ? s : s.toString()[1]
    return `${n1}${n2}:${n3}${n4}`
})

const ipcs = {
    init:()=>{
        window.ipcRenderer.send('TOMATO-CORNER-INIT')
    }
}

onMounted(()=>{
    //初始化面板
    ipcs.init()
    //初始化监听
    initIpcListener()
    //TODO 开启拖拽后所有鼠标事件失效，这里仍需要探讨
    // dom.value.addEventListener('mouseover',()=>{
    //     window.ipcRenderer.send('GENERAL-OPEN-WINDOW', {id:'ModuleClockTomato'})
    // })
})

const initIpcListener = () => {
    //监听时长，心跳
    window.ipcRenderer.listen('TOMATO-CLOCK-CALL', (e, res): void => {
        const { value, status } = res
        console.log('ererer',res)
        countdown.value = value
        clockStatus.value = status
    })
}

</script>
<template>
    <div class="main-content tomato-corner" ref="dom">
        {{ clockStatus?calcTime:'空闲中' }}
    </div>
</template>
<style lang="scss">
.main-content.tomato-corner {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
    /* Standard syntax */
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    color: #CCCC00;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-app-region: drag;
    font-size:11px;
    font-weight: bold;
}
</style>
<style lang="scss" scoped></style>